<template>
	<view class="p30">
		<view class="mb20 c6"><text class="c3">说明：</text> 请您将手机并贴近嘴巴，按正常交流的语音、语调和语速完成如下录音。</view>
		<view class="item mt40">
			<view class="mb20">发音内容：/a/ （普通话：啊），念5遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._a == 'start'" @click="recorderStart(8000,'_a')">开始录音</view>
				<view class="recording" v-show="isRecord._a == 'ongoing'" @click="recorderStart(8000,'_a')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._a == 'end'" @click="recorderStart(8000,'_a')">重新录音</view>
			</view>
		</view>
		<view class="item mt40">
			<view class="mb20">发音内容：/o/ （普通话：哦），念5遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._o  == 'start'" @click="recorderStart(8000,'_o')">开始录音</view>
				<view class="recording" v-show="isRecord._o == 'ongoing'" @click="recorderStart(8000,'_o')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._o == 'end'" @click="recorderStart(8000,'_o')">重新录音</view>
			</view>
		</view>
		
		<view class="item mt40">
			<view class="mb20">发音内容：/i/ （普通话：咦），念5遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._i  == 'start'" @click="recorderStart(8000,'_i')">开始录音</view>
				<view class="recording" v-show="isRecord._i == 'ongoing'" @click="recorderStart(8000,'_i')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._i == 'end'" @click="recorderStart(8000,'_i')">重新录音</view>
			</view>
		</view>

		<view class="item mt40">
			<view class="mb20">发音内容：/u/ （普通话：呜），念5遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._u  == 'start'" @click="recorderStart(8000,'_u')">开始录音</view>
				<view class="recording" v-show="isRecord._u == 'ongoing'" @click="recorderStart(8000,'_u')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._u == 'end'" @click="recorderStart(8000,'_u')">重新录音</view>
			</view>
		</view>

		<view class="item mt40">
			<view class="mb20">从1数到10，每个数字间略有停顿，按正常语音、语调和语速，朗读1遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._num_asc  == 'start'" @click="recorderStart(10000,'_num_asc')">开始录音</view>
				<view class="recording" v-show="isRecord._num_asc == 'ongoing'" @click="recorderStart(8000,'_num_asc')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._num_asc == 'end'" @click="recorderStart(8000,'_num_asc')">重新录音</view>
			</view>
		</view>
		<view class="item mt40 ">
			<view class="mb20">从10数到1，每个数字间略有停顿，按正常语音、语调和语速，朗读1遍</view>
			<view class="flex flex-jcsa">
				<view class="btn backd287b0" v-show="isRecord._num_desc  == 'start'" @click="recorderStart(10000,'_num_desc')">开始录音</view>
				<view class="recording" v-show="isRecord._num_desc == 'ongoing'" @click="recorderStart(8000,'_num_desc')">录音中</view>
				<view class="btn backa93c68e" v-show="isRecord._num_desc == 'end'" @click="recorderStart(8000,'_num_desc')">重新录音</view>
			</view>
		</view>

		<view class="nextBtn" @click="next">{{ last ? '完成':'下一项'}}</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	
	export default {
		name: "",
		data() {
			return {
				voicePath: {
					_a: '',
					_o: '',
					_i: '',
					_u: '',
					_num_asc: '',
					_num_desc: ''
				},
				isRecord:{    // start   ongoing end
					_a: 'start',
					_o: 'start',
					_i: 'start',
					_u: 'start',
					_num_asc: 'start',
					_num_desc: 'start'
				},
				pathName: ''
			}
		},
		props: {
			sindex: {
				type: Number,
			},
			last: {
				type: Boolean,
			}
		},
		created() {
			let _this = this;
			recorderManager.onStop(function(res) {
				_this.isRecord[_this.pathName] = 'end';
				_this.voicePath[_this.pathName] = res.tempFilePath;
			});
			recorderManager.onStart(function(res) {
				console.log(res, '开始监听录音了');
			})
			recorderManager.onStart(function(res) {
				console.log(res, '开始监听录音了');
			})
		},
		methods: {
			next() {
				let keys = Object.keys(this.voicePath);
				for (let i = 0; i < keys.length; i++) {
					if (this.voicePath[keys[i]] == '') {
						uni.showToast({
							title: "请完成所有录音",
							icon: "none"
						})
						return false
					}
				}
				this.$emit('changeindex', {
					sindex: this.sindex + 1,
					data: this.voicePath
				})
			},
			recorderStart(second, name) {
				let _this =this, keys = Object.keys(_this.isRecord);
				for(let i = 0; i< keys.length; i++){
					if(_this.isRecord[keys[i]] == 'ongoing'){
						uni.showToast({
							title:"正在录音",
							icon:"none"
						})
						
						return false;
					}
				}
			
				uni.authorize({
					scope: 'scope.record',
					success() {
						_this.pathName = name;
						_this.isRecord[name] = 'ongoing';
						recorderManager.start({
							duration: second,
							sampleRate: 8000,
						});
					},
					fail(err) {
						console.log(err);
						if (err.errMsg == "authorize:fail auth deny") {
							uni.showModal({
								title: "提示",
								content: "您已取消授权，若使用录音功能请打开权限",
								confirmText: "打开",
								success(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									}
								}
							})
						} else {
							uni.showModal({
								title: "提示",
								content: "您未授权，若使用录音功能请打开权限",
								confirmText: "打开",
								success(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									}
								}
							})

						}
					}
				})


			},
			recorderEnd() {
				let _this = this;
				console.log('开始结束录音了');
				recorderManager.stop()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		padding: 20rpx;
		border-radius: 20rpx;
		border: 4rpx solid #ddd;
		.btn{
			width: 160rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 32rpx;
		}
		.recording{
			width: 160rpx;
			height: 72rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 16rpx;
			border: 4rpx solid #d287b0;
		}
	}
	.nextBtn{
		width: 160rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: #fff;
		padding: 0;
		margin: 60rpx auto;
		background-color: #a61b32;
		border-radius: 16rpx;
	}
</style>
